<template>
  <form-layout>
    <span slot="title">{{$t('starting.createTeam')}}</span>
    <v-form ref="createForm" v-model="valid">
      <v-text-field
        :label="$t('starting.teamName')"
        v-model="createForm.name"
        :rules="createRules.name"
        prepend-icon="games"
        required
      ></v-text-field>
      <dynamic-tags-input
        :label="$t('starting.classes')"
        :chips.sync="createForm.classes"
        :rules="createRules.classes"
        prepend-icon="people"
        :hint="$t('starting.clickEditAdd')"
        required
      ></dynamic-tags-input>
      <dynamic-tags-input
        :label="$t('starting.dormitories')"
        :chips.sync="createForm.dormitories"
        :rules="createRules.dormitories"
        prepend-icon="domain"
        :hint="$t('starting.clickEditAdd')"
        required
      ></dynamic-tags-input>
      <v-btn @click.native="handleCreate" block color="primary">{{$t('starting.createTeam')}}</v-btn>
    </v-form>
  </form-layout>
</template>

<script>
  import FormLayout from '@/views/layout/FormLayout'
  import DynamicTagsInput from '@/components/DynamicTagsInput'
  import { create } from '@/api/team'
  export default {
    components: { FormLayout, DynamicTagsInput },
    data: () => ({
      valid: true,
      createForm: {
        name: '',
        years: '',
        classes: [],
        dormitories: []
      },
      createRules: {
        name: [v => !!v || '请填写团队名'],
        classes: [v => v.length >= 1 || '至少要有一个班级'],
        dormitories: [v => v.length >= 1 || '至少要有一个宿舍楼']
      }
    }),
    methods: {
      handleCreate() {
        if (this.$refs.createForm.validate()) {
          console.log(this.createForm)
          create(this.createForm).then(res => {
            if (res.status === 200) {
              this.$notify.success(`成功创建 ${this.createForm.name} !`)
              this.$store.commit('SET_TEAM', res.data.team)
              this.$router.push({ path: '/' })
            }
          })
        }
      }
    }
  }
</script>
